<template>
  <van-popup
    v-model:show="dialogVisible"
    position="bottom"
    :closeable="true"
    :style="{ height: '100%' }"
    @closed="handleClosedEvent"
  >
    <van-tabs
      v-model:active="active"
      sticky
      animated
      shrink
    >
      <van-tab
        :title="$t('form.form.data')"
        name="data"
      >
        <div
          class="form-content mt10"
          ref="formContainerRef"
        >
          <generate-form
            v-if="formConf.fields.length && currentFormModel && isEditMode"
            ref="generateFormRef"
            :form-conf="formConf"
            :page-form-model="currentFormModel"
            :show-hidden-field="true"
            style="margin-bottom: 40px"
          />
          <div v-else>
            <exam-result
              v-if="formType === 4 && dialogVisible"
              id="printForm"
              ref="examFormRef"
              :key="formParseKey"
              :data-id="currentFormModel['id']"
              style="margin-bottom: 40px"
              :show-dimension-report="!!dimensionConfig"
            />
            <view-data
              v-else
              id="printForm"
              v-model:is-print="isPrint"
              :fields="fields"
              :page-form-model="currentFormModel"
            />
          </div>
        </div>
        <van-sticky
          position="bottom"
          :offset-bottom="0"
          class="toolbar"
        >
          <el-row align="middle">
            <el-col :span="2">
              <el-icon
                @click="handlePageChange(-1)"
                :size="20"
              >
                <ele-ArrowLeft />
              </el-icon>
            </el-col>
            <el-col :span="20">
              <div class="btn-wrap-list">
                <div
                  class="btn-wrap"
                  v-if="!isEditMode && canUpdate"
                  @click="handleEditMode"
                >
                  <el-icon
                    :size="23"
                    class="text-primary"
                  >
                    <ele-Edit></ele-Edit>
                  </el-icon>
                  <div class="text">{{ $t("form.viewOrUpdate.modify") }}</div>
                </div>
                <div
                  class="btn-wrap"
                  v-if="isEditMode"
                  @click="handleUpdate"
                >
                  <el-icon
                    :size="23"
                    class="text-primary"
                  >
                    <ele-Check></ele-Check>
                  </el-icon>
                  <div class="text">{{ $t("form.viewOrUpdate.confirm") }}</div>
                </div>
                <div
                  class="btn-wrap"
                  v-if="isEditMode"
                  @click="handleCancel"
                >
                  <el-icon
                    :size="23"
                    class="text-primary"
                  >
                    <ele-Close></ele-Close>
                  </el-icon>
                  <div class="text">{{ $t("form.viewOrUpdate.cancel") }}</div>
                </div>

                <div
                  class="btn-wrap"
                  v-if="checkBtnPerms('delete')"
                  @click="handleDelete"
                >
                  <el-icon
                    class="text-danger"
                    :size="23"
                  >
                    <ele-Delete></ele-Delete>
                  </el-icon>
                  <div class="text">{{ $t("form.viewOrUpdate.delete") }}</div>
                </div>
                <div
                  class="btn-wrap"
                  v-if="openReply"
                  @click="emit('openReply')"
                >
                  <el-icon
                    :size="23"
                    class="text-success"
                  >
                    <ele-ChatLineSquare />
                  </el-icon>
                  <div class="text">{{ $t("form.viewOrUpdate.reply") }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="2">
              <el-icon
                @click="handlePageChange(1)"
                :size="20"
              >
                <ele-ArrowRight />
              </el-icon>
            </el-col>
          </el-row>
        </van-sticky>
      </van-tab>
      <van-tab
        :title="$t('form.viewOrUpdate.basicInformation')"
        name="basic"
      >
        <data-basic-info
          class="m10"
          :column="1"
          size="default"
          :border="true"
          :fixed-fields="fixedFields"
          :current-form-model="currentFormModel"
        />
      </van-tab>
      <van-tab
        :title="$t('form.data.updateInfo')"
        name="updateInfo"
      >
        <data-logs
          class="m10"
          :id="currentFormModel?.id"
          v-if="dialogVisible"
        />
      </van-tab>
      <van-tab
        :title="$t('form.viewOrUpdate.dataRemarks')"
        name="updateInfo"
      >
        <data-remark
          class="m10"
          :data-id="currentFormModel?.id"
          :form-key="formKey"
        />
      </van-tab>
    </van-tabs>
    <data-share ref="dataShareRef" />
  </van-popup>
</template>

<script name="ViewOrUpdate" setup>
import { defineProps, ref } from "vue";
import { loadAsyncComponent } from "@/utils/asyncComponent";
import GenerateForm from "@/views/formgen/components/GenerateForm/GenerateForm.vue";
import ExamResult from "@/views/form/exam/ExamResult.vue";
import ViewData from "../view/ViewData.vue";
import { useDataViewOrUpdate, viewOrUpdateEmits, viewOrUpdateProps } from "@/views/form/data/view/useDataViewOrUpdate";
import { Tab, Tabs, Sticky, Button } from "vant";

const DataRemark = loadAsyncComponent(() => import("../view/components/DataRemark.vue"));
const DataShare = loadAsyncComponent(() => import("../view/components/DataShare.vue"));
const DataLogs = loadAsyncComponent(() => import("../view/components/DataLogs.vue"));
const DataBasicInfo = loadAsyncComponent(() => import("@/views/form/data/view/DataBasicInfo.vue"));

const props = defineProps({
  ...viewOrUpdateProps
});

const emit = defineEmits(viewOrUpdateEmits);

const {
  handleShowDataShare,
  handleDelete,
  handleUpdate,
  formType,
  currentFormModel,
  dialogVisible,
  dialogTitle,
  activeName,
  isEditMode,
  formParseKey,
  formConf,
  isPrint,
  fullscreen,
  openReply,
  printForm,
  checkBtnPerms,
  dimensionConfig,
  dataList,
  handlePageChange,
  currentDataIndex,
  showDialog,
  handleCancel,
  handleEditMode,
  handleFullScreen,
  dataShareRef,
  generateFormRef
} = useDataViewOrUpdate(props, emit);

const active = ref("data");

const handleClosedEvent = () => {
  active.value = "data";
};

const formContainerRef = ref(null);

defineExpose({
  showDialog
});
</script>

<style lang="scss" scoped>
:deep(.exam-result-wrap .exam-result-wrap__card) {
  width: 90% !important;
}

.form-content {
  height: 85vh;
  overflow: auto;
}

:deep(.exam-result-wrap) {
  height: 100%;
  overflow: inherit !important;
}

.m10 {
  margin: 10px;
}

.btn-wrap-list {
  display: flex;
  width: 100%;
}

.btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;

  .text {
    font-size: 12px;
    color: #666666;
  }
}
</style>
